button[su],
::-webkit-file-upload-button {
    display: inline-block;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: var(--x2);
    height: var(--x2);
    min-width: var(--x6);
    padding: 0;
    border: none;
    outline: none;
    text-decoration: none;
    position: relative;
    border-radius: var(--rad);
    box-shadow: 0 1px 3px var(--Shadow);
    transition: box-shadow .5s ease-out;
    cursor: pointer;
    background-color: var(--background-color);
    color: var(--color);
    word-wrap: normal;
}

button[su]::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    border-radius: 10%/40%;
    transform: translate(-50%, -50%);
    transition: all .5s cubic-bezier(.23, .95, .56, 1);
}

button[su]:hover {
    box-shadow: 0 6px 16px var(--Shadow);
    transition: all .5s ease-out;
}

button[su]:active {
    transition: all .3s ease-out;
}

button[su]:active::before {
    width: 0;
    height: 100%;
    border-radius: 0;
    background-color: var(--Shadow);
    -webkit-transition: all .01s ease-out;
    transition: all .01s ease-out;
}

button[su][disabled] {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}

button[su~="outlined"] {
    border: 1px solid var(--Primary);
    background-color: var(--Primary_i);
    color: var(--Primary);
}

button[su~="rounded"] {
    border-radius: 2rem;
}

button[su~="circle"] {
    border-radius: 50%;
    min-width: var(--x2);
    width: var(--x2);
    overflow: hidden;
}


/* nav */

button[su~="-"] {
    -webkit-appearance: none;
    border: 0;
    outline: none;
    padding: 0;
}

button[su~="-"] a {
    display: block;
    /* text-indent: -15px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    position: relative;
    z-index: 1;
    padding: 0 0.5em;
    transition: background-color .1s, color .1s;
    color: inherit;
}

button[su~="-"]>a::after {
    content: '▼';
    color: rgba(0, 0, 0, 0.3);
    margin-left: 0.5em;
    font-stretch: ultra-condensed;
}

button[su~="-"]:hover {
    box-shadow: 0 1px 3px var(--Gray);
}

button[su~="-"]::before {
    display: none;
}

button[su~="-"] hr {
    margin: 0;
    border: 0;
    background-color: rgba(0, 0, 0, 0.2);
    height: 1px;
}

button[su~="-"] a:focus-within::after {
    /* transform: rotate(180deg); */
}

button[su~="-"] ul {
    height: 0;
    position: absolute;
    border: inherit;
    background-color: inherit;
    box-shadow: inherit;
    min-width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

button[su~="-"] ul li {
    display: none;
}

button[su~="-"] ul input:not(:checked)+span {
    display: none;
}

button[su~="-"]:focus-within ul {
    height: auto;
}

button[su~="-"]:focus-within ul li {
    display: block;
}

button[su~="-"]:focus-within ul input:hover {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1);
}

button[su~="-"]:focus-within ul input+span {
    display: block;
}

button[su~="-"] ul a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

button[su~="-"] ul a:active {
    background-color: rgba(0, 0, 0, 0.1);
}

button[su~="-"] a:hover {
    text-decoration: none;
}

button[su~="-"] a {
    color: inherit;
}

button[su~="-"] input,
button[su~="-"] span {
    width: 100%;
    height: var(--x2);
    line-height: var(--x2);
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
}

button[su~="-"] span {
    width: 0;
    display: block;
    text-align: left;
    text-indent: 0.5em;
}

button[su~="-"] input+span {
    margin-top: calc(0px - var(--x2));
    word-wrap: normal;
}

button[su~="-"] input:checked {
    background: rgba(0, 0, 0, 0.1);
    display: none;
}

button[su~="-"] input:checked+span {
    position: absolute;
    top: 0px;
    width: calc(100% - 1.5em);
    background-color: var(--background-color);
    z-index: 1;
    background: inherit;
}

label[su-input] {
    word-wrap: normal;
}

span[su-group] {
    letter-spacing: -1em;
    display: inline-block;
}

span[su-group] button {
    min-width: var(--x2);
    margin: 0;
    box-shadow: none!important;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-collapse: collapse;
}

span[su-group~="-"] button:not(:last-of-type) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

span[su-group~="-"] button:not(:first-of-type) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

span[su-group~="|"] button {
    clear: both;
    display: block;
    width: 100%;
}

span[su-group~="|"] button:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

span[su-group~="|"] button:not(:first-of-type) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

span[su-group] span {
    text-align: center;
    width: 100%;
}

ul[su-group] {
    border-radius: var(--rad);
    border: 1px solid var(--Gray);
    padding: 0;
    margin: 0;
}

ul[su-group] li {
    padding: 0;
    margin: 0;
}

ul[su-group] li:not(:last-child) {
    border-bottom: 1px solid var(--Gray);
}